<template>

	<view class="main">


		<u-navbar :bgColor="bgColor" :fixed="false" title="编辑病例" placeholder="true" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<view class="info">

			<!-- 表单部分 -->
			<u--form labelWidth="100" :model="formData" :rules="rules" ref="uForm">



				<u-form-item label="护士" prop="nurseName" @click="showHs=true" borderBottom>
					<u--input placeholder="请选择护士" border="none" v-model="formData.nurseName"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker @cancel="showHs=false" :show="showHs" :columns="hsListData" keyName="name" @confirm="confirmHs"></u-picker>
				</u-form-item>


				<u-form-item label="助理" prop="assistantName" @click="showZl=true" borderBottom>
					<u--input placeholder="请选择护士" border="none" v-model="formData.assistantName"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker @cancel="showZl=false" :show="showZl" :columns="hsListData" keyName="name" @confirm="confirmZl"></u-picker>
				</u-form-item>





				<u-form-item label="主诉" prop="chief_complaint" borderBottom>
					<u--input placeholder="请输入" border="none" v-model="formData.chief_complaint" type="number"></u--input>
				</u-form-item>

				<u-form-item label="现病史" prop="current_medical_history" borderBottom>
					<u--input placeholder="请输入" border="none" v-model="formData.current_medical_history" type="number"></u--input>
				</u-form-item>

				<u-form-item label="既往史" prop="past_medical_history" borderBottom>
					<u--input placeholder="请输入" border="none" v-model="formData.past_medical_history" type="number"></u--input>
				</u-form-item>



				<u-form-item label="相关影像" prop="avatar" borderBottom>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"></u-upload>
				</u-form-item>

				<u-form-item label="诊断" prop="diagnosis" borderBottom>
					<u--input placeholder="请输入" border="none" v-model="formData.diagnosis" type="number"></u--input>
				</u-form-item>

				<u-form-item label="治疗计划" prop="treatment" borderBottom>
					<u--input placeholder="请输入" border="none" v-model="formData.treatment" type="number"></u--input>
				</u-form-item>

				<u-form-item label="医嘱" prop="enjoin" borderBottom>
					<u--input placeholder="请输入" border="none" v-model="formData.enjoin" type="number"></u--input>
				</u-form-item>

				<u-form-item label="备注" prop="remark" borderBottom>
					<u--input placeholder="请输入" border="none" v-model="formData.remark" type="number"></u--input>
				</u-form-item>

			</u--form>

			<u-button @click="submit()" :custom-style="{ backgroundColor: '#27CCBB', marginTop:'100rpx',marginBottom: '50rpx',color: '#fff', borderRadius: '40rpx', height:'80rpx'}" text="保 存"></u-button>


		</view>
	</view>

</template>

<script>
	import api_mr from '@/api/mr.js';
	import api_employee from '@/api/employee.js';

	export default {
		components: {

		},
		async onLoad(option) {
			this.order = option.id;
			this.getStaffStoreListFuc(); //获取门店所有员工列表
			this.medicalRecordInfoFuc(); //病历信息---未完结的
		},

		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				// this.getStaffStoreListFuc(); //获取门店所有员工列表
				// this.medicalRecordInfoFuc(); //病历信息---未完结的
			}
		},




		data() {
			return {
				fileList1: [],
				showHs: false,
				showZl: false,
				hsListData: null,
				order: null,
				access_token: null,
				valueTime: Number(new Date()),
				showTime: false,

				bgColor: 'rgba(0, 31, 63, 0)',
				formData: {
					nurseName: null,
					assistantName: null,
					chief_complaint: null,
					current_medical_history: null,
					past_medical_history: null,
					diagnosis: null,
					treatment: null,
					enjoin: null,
					remark: null,

				},
				rules: {
					chief_complaint: {
						type: 'string',
						required: true,
						message: '请填写主诉',
						trigger: ['blur', 'change']
					},
					current_medical_history: {
						type: 'string',
						required: true,
						message: '请填写现病史',
						trigger: ['blur', 'change']
					},
					past_medical_history: {
						type: 'string',
						required: true,
						message: '请填写既往史',
						trigger: ['blur', 'change']
					},
					diagnosis: {
						type: 'string',
						required: true,
						message: '请填写诊断',
						trigger: ['blur', 'change']
					},
					treatment: {
						type: 'string',
						required: true,
						message: '请填写治疗计划',
						trigger: ['blur', 'change']
					},
					enjoin: {
						type: 'string',
						required: true,
						message: '请填写医嘱',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {

			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)

					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.88.237:8788/api/upload/file', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image'
						},
						success: (res) => {
							setTimeout(() => {
								const parsedData = JSON.parse(res.data);
								resolve(parsedData.data.url)
							}, 1000)
						}
					});
				})
			},


			//确认护士
			confirmHs(e) {
				// this.formData.nurse = e.value[0].id;
				// this.formData.nurseName = e.value[0].name;
				this.showHs = false;
				this.$set(this.formData, 'nurse', e.value[0].id)
				this.$set(this.formData, 'nurseName', e.value[0].name)




			},


			//确认助理
			confirmZl(e) {
				// this.formData.assistant = e.value[0].id;
				// this.formData.assistantName = e.value[0].name;
				this.showZl = false;
				this.$set(this.formData, 'assistant', e.value[0].id)
				this.$set(this.formData, 'assistantName', e.value[0].name)


			},


			// 获取门店所有员工列表
			async getStaffStoreListFuc() {
				var per = {
					no_page: 1,
					page_size: 100
				}
				const res = await api_employee.getStaffStoreList(per);
				if (res.code == 1) {
					this.hsListData = [res.data.list];





				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			//病历信息---未完结的
			async medicalRecordInfoFuc() {
				var per = {
					order: this.order,
				}
				const res = await api_mr.medicalRecordInfo(per);
				if (res.code == 1) {
					this.$nextTick(() => {
						this.formData = res.data.info
						if (this.formData.screenage && this.formData.screenage.length > 0) {
							this.fileList1 = this.formData.screenage.map(url => ({ url }));
						}

						this.formData.assistantName = this.formData.assistant.name;
						this.formData.assistant = this.formData.assistant.id;
						console.log('nurse护士', this.formData.nurse.name);
						this.formData.nurseName = this.formData.nurse.name;
						this.formData.nurse = this.formData.nurse.id;
					});
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			submit() {
				this.$refs.uForm.validate().then(res => {
					this.medicalRecordModifyFuc();
				}).catch(errors => {
					uni.$u.toast('请检查填写信息')
				})
			},

			toUrl(url) {
				this.navTo(url);
			},

			toUrlInfo() {
				uni.navigateTo({
					url: '/pages/patient/treatment-procedure?id=' + this.order
				});
			},


			// 编辑病历
			async medicalRecordModifyFuc() {
				console.log('aaaaaaaaaaaaaaa', this.fileList1);
				var per = {
					order: this.order,
				}
				if (this.formData.type > 0) {
					per.type = 2
				} else {
					per.type = 1
				}

				if (this.formData.nurse) {
					per.nurse = this.formData.nurse
				}

				if (this.formData.assistant) {
					per.assistant = this.formData.assistant
				}

				if (this.formData.chief_complaint) {
					per.chief_complaint = this.formData.chief_complaint
				}

				if (this.formData.current_medical_history) {
					per.current_medical_history = this.formData.current_medical_history
				}

				if (this.formData.past_medical_history) {
					per.past_medical_history = this.formData.past_medical_history
				}


				if (this.formData.diagnosis) {
					per.diagnosis = this.formData.diagnosis
				}

				if (this.formData.treatment) {
					per.treatment = this.formData.treatment
				}


				if (this.formData.enjoin) {
					per.enjoin = this.formData.enjoin
				}



				if (this.fileList1.length > 0) {
					per.screenage = this.fileList1.map(item => item.url);
				}

				if (this.formData.remark) {
					per.remark = this.formData.remark
				}


				const res = await api_mr.medicalRecordModify(per);
				if (res.code == 1) {
					this.$util.msg(res.message);
					this.toUrlInfo();
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


		}
	};
</script>

<style scoped lang="scss">
	.info {
		width: 100%;
		min-height: 1000rpx;
		background: #FFFFFF;
		top: 540rpx;
		padding: 50rpx 32rpx 32rpx 32rpx;
	}


	.form-container {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.header {
		margin-bottom: 20rpx;
	}

	.xinga {
		width: 6rpx;
		height: 24rpx;
		background: #1FA194;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 10rpx;
	}



	.header-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #1CC09B;
	}

	.header-subtitle {
		font-size: 20rpx;
		color: #B2B2B2;
	}

	.add-person {
		font-weight: 400;
		font-size: 24rpx;
		color: #1FA194;
		margin-bottom: 10rpx;
	}

	.add-person-btn {
		margin: 20rpx 0;
		height: 146rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx dashed #1FA194;
	}

	.add-person-note {
		font-size: 20rpx;
		color: #B2B2B2;
	}

	.yybut {
		width: 622rpx !important;
		height: 180rpx !important;
		background: #27CCBB !important;
		border-radius: 40rpx 40rpx 40rpx 40rpx !important;
	}


	::v-deep .u-form-item {
		line-height: 50px;
	}

	::v-deep .u-input__content__field-wrapper__field {
		background: #FFFFFF !important;
	}
</style>